<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>WebGL Smooth Star Animation</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <canvas id="canvas" width="600" height="600"></canvas>
    <script>
        // Vertex and fragment shader for star
        const s = {
            v: `
    attribute vec4 a_position;
    void main() {
        gl_Position = a_position;
        gl_PointSize = 10.0;
    }
  `,
            f: `
    precision mediump float;
    void main() {
      gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
    }
  `,
        }

        // Get the WebGL context
        const canvas = document.getElementById('canvas');
        const gl = canvas.getContext('webgl');

        if (!gl) {
            console.error('WebGL not supported');
            throw 'WebGL not supported';
        }

        // Function to create and compile shader
        function createShader(gl, type, source) {
            const shader = gl.createShader(type);
            gl.shaderSource(shader, source);
            gl.compileShader(shader);
            if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
                console.error('Shader compilation error:', gl.getShaderInfoLog(shader));
                gl.deleteShader(shader);
                return null;
            }
            return shader;
        }

        // Function to create program
        function createProgram(gl, vertexShaderSource, fragmentShaderSource) {
            const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
            const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);

            const program = gl.createProgram();
            gl.attachShader(program, vertexShader);
            gl.attachShader(program, fragmentShader);
            gl.linkProgram(program);
            if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
                console.error('Program link error:', gl.getProgramInfoLog(program));
                gl.deleteProgram(program);
                return null;
            }
            return program;
        }

        // Create the program
        const program = createProgram(gl, s.v, s.f);
        gl.useProgram(program);

        // Get the attribute location
        const a_position = gl.getAttribLocation(program, 'a_position');

        // Function to create buffer and set data
        function createBuffer(gl, data) {
            const buffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data), gl.STATIC_DRAW);
            gl.vertexAttribPointer(a_position, 2, gl.FLOAT, false, 0, 0);
            gl.enableVertexAttribArray(a_position);
            return buffer;
        }

        // Star vertex data
        const lines = [
            [0, 0.5],
            [-0.2, 0],
            [-0.7, 0],
            [-0.3, -0.3],
            [-0.5, -0.9],
            [0.0, -0.5],
            [0.5, -0.9],
            [0.3, -0.3],
            [0.7, 0],
            [0.2, 0],
            [0, 0.5],
        ];

        let line_complete_arr = [];
        let i = 0;
        let lastTime = 0;
        const interval = 500; // milliseconds

        function draw(timestamp) {
            if (!lastTime) lastTime = timestamp;
            const elapsed = timestamp - lastTime;

            if (elapsed > interval) {
                if (i < lines.length) {
                    line_complete_arr.push(...lines[i]);
                    i++;
                }
                lastTime = timestamp;
            }

            // Clear the canvas
            gl.clear(gl.COLOR_BUFFER_BIT);

            // Create buffer with the current line data
            createBuffer(gl, line_complete_arr);
            gl.drawArrays(gl.LINE_STRIP, 0, line_complete_arr.length / 2);

            // Request next frame
            requestAnimationFrame(draw);
        }

        // Initialize the animation
        gl.clearColor(1.0, 1.0, 1.0, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);
        requestAnimationFrame(draw);
    </script>
</body>

</html>